<template>
    <section class="main">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-upload2"></i> 拖拽排序</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="drag-box-left">
            <div class="drag-title">拖动排序</div>
            <div class="drag-list" draggable="true"
            v-for="list in data1"
            :data-id="list.id"
            @dragstart="dragstartEvent"
            @dragend="dragendEvent"
            @dragenter="dragenterEvent"
            @dragleave="dragleaveEvent"
            @dragover="dragoverEvent"
            :key="list.id"
            :style="list.style">{{list.title}}</div>
        </div>
    </section>
</template>

<script>
export default {
    data () {
        return {
            dragElement: null,
            lock: true,
            data1: [
                { id: 1, title: '这里是列表1的标题', style: { backgroundColor: '#303133' ,color:'#b9001f'} },
                { id: 2, title: '这里是列表2的标题', style: { backgroundColor: '#606266' ,color:'#b9001f'} },
                { id: 3, title: '这里是列表3的标题', style: { backgroundColor: '#909399' ,color:'#b9001f'} },
                { id: 4, title: '这里是列表4的标题', style: { backgroundColor: '#C0C4CC' ,color:'#b9001f'} },
                { id: 5, title: '这里是列表5的标题', style: { backgroundColor: '#DCDFE6' ,color:'#b9001f'} },
                { id: 6, title: '这里是列表6的标题', style: { backgroundColor: '#E4E7ED' ,color:'#b9001f'} },
                { id: 7, title: '这里是列表7的标题', style: { backgroundColor: '#EBEEF5' ,color:'#b9001f'} }
            ],
            data2: [
                { id: 1, title: '这里是列表11的标题' },
                { id: 2, title: '这里是列表12的标题' },
                { id: 3, title: '这里是列表13的标题' },
                { id: 4, title: '这里是列表14的标题' }
            ]
        }
    },
    methods: {
        dragstartEvent (ev) {
            const self = this;
            self.dragElement = ev.target;
            ev.target.style.backgroundColor = '#f8f8f8';
        },
        dragendEvent (ev) {
            ev.target.style.backgroundColor = '#fff';
            ev.preventDefault();
        },
        dragenterEvent (ev) {
            const self = this;
            if (self.dragElement != ev.target) {
                ev.target.parentNode.insertBefore(self.dragElement, ev.target);
            }
        },
        dragleaveEvent (ev) {
            const self = this;
            if (self.dragElement != ev.target) {
                if (self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)) {
                    ev.target.parentNode.appendChild(self.dragElement);
                    self.lock = false;
                } else {
                    self.lock = true;
                }
            }
        },
        dragoverEvent (ev) {
            ev.preventDefault();
        }
    }
}
</script>

<style scoped>
.drag-box-left {
  float: left;
  width: 45%;
}
.drag-box-right {
  float: right;
  width: 45%;
}
.drag-list {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
  transition: border 0.3s;
}
.drag-list:hover {
  border: 1px solid #20a0ff;
}
.drag-title {
  font-weight: 400;
  line-height: 25px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
</style>
